<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html class="win-frame">
<head>
<title>${name_china}管理-编辑${name_china}</title>
<%@include file="/common/head.jsp" %>

<!-- 上传下载插件 -->
 <link href="<%=request.getContextPath()%>/static/plugin/uploadify/style/uploadify.css" rel="stylesheet">
 <script src="<%=request.getContextPath()%>/static/plugin/uploadify/js/jquery.uploadify.js"></script>

<!-- 时间日期插件 -->
<link href="<%=request.getContextPath()%>/static/plugin/My97DatePicker/skin/default/datepicker.css" rel="stylesheet" >
<script src="<%=request.getContextPath()%>/static/plugin/My97DatePicker/WdatePicker.js"></script>

<!--富文本插件 -->
<script src="<%=request.getContextPath()%>/static/plugin/ckeditor/ckeditor.js"></script>

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/plugin/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/image-server/style/style.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/plugin/webuploader-0.1.5/webuploader.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/plugin/webuploader-0.1.5/uploader.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/static/plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/plugin/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/plugin/webuploader-0.1.5/common.js"></script>

</head>
<body class="iframe-page">
<div class="page-title-wrapper">
    <div class="page-title">
        <div class="page-title-text">
            <span>${name_china}管理</span>
            <span class="split"></span>
            <span>编辑${name_china}</span>
        </div>
        <a id="goBack" class="btn-return distance-left" href="javascript:;"><i class="icon icon-arrow-left"></i>返回上级</a>
    </div>
    <div class="page-title-border"></div>
</div>

<form id="form" method="post">
    <div class="form-wrapper">
	  <div class="h4 distance-double">
        <span class="h4-title"><i class="icon icon-setting"></i>基本信息</span>
        <span class="h4-border"></span>
      </div>
      
      <input type="hidden" id="id" name="id"/> 
      
      <input type="hidden" name="productIds" id="productIds">
      
      <div class="form-cont">
	        <p class="form-cont-title">排序号</p>
	        <input type="text" id="reorder" name="reorder" class="summer-input summer-validatebox"  data-validatebox="validType:['noNegativeNumber']"/> 
	     </div>
	     
	     <div class="form-cont">
	        <p class="form-cont-title"><span class="field-required">*</span>名称</p>
	        <input type="text" id="name" name="name" class="summer-input summer-validatebox"  data-validatebox="validType:['required','maxLength[50]']"/> 
	     </div>
	     
	      <div class="form-cont">
	        <p class="form-cont-title"><span class="field-required">*</span>类型</p>
	        <input type="text" id="type" name="type" class="summer-input summer-validatebox"  data-validatebox="validType:['required','maxLength[50]']"/> 
	     </div>
	    
	      <div class="form-cont">
	        <p class="form-cont-title"><!-- <span class="field-required">*</span> -->轮播图片</p>
	        <input type="hidden" id="url" name="url"/> 
		    <!--  <input type="text" id="mainImageUrl" name="mainImageUrl" class="summer-input summer-validatebox"  data-validatebox="validType:['maxLength[300]']"/> -->
		    <!-- 文件上传 -->
	     	<div >
				<div id="urlList" class="uploader-list"></div>
				<div id="urlPicker">选择图片</div>
				<p style="color:red">建议高：188px；宽：375px</p>
			</div>
	     </div>
	     
	      <div class="form-cont">
	        <p class="form-cont-title"><span class="field-required">*</span>H5模板</p>
	        <input type="text" id="www" name="www" class="summer-input summer-validatebox"  data-validatebox="validType:['required','maxLength[50]']"/> 
	     </div>
	     
	      <div class="form-cont">
	        <p class="form-cont-title">活动标题</p>
	        <input type="text" id="title" name="title" class="summer-input summer-validatebox"  data-validatebox="validType:['maxLength[500]']"/> 
	     </div>
	     
	     <div class="form-cont">
	        <p class="form-cont-title"><!-- <span class="field-required">*</span> -->活动图片</p>
	        <input type="hidden" id="images" name="images"/> 
		    <!--  <input type="text" id="mainImageUrl" name="mainImageUrl" class="summer-input summer-validatebox"  data-validatebox="validType:['maxLength[300]']"/> -->
		    <!-- 文件上传 -->
	     	<div >
				<div id="imagesList" class="uploader-list"></div>
				<div id="imagesPicker">选择图片</div>
			</div>
	     </div>
	     
	      <div class="form-cont">
	        <p class="form-cont-title">活动内容</p>
	        <textarea class="ckeditor" id="content" name="content"></textarea>
	     </div>
	     
	      <div class="form-cont" >
	         <p class="form-cont-title">商品选择</p>
	         <span class="field-cont">
		        <span class="field-cont-title">商品名称</span>
		        <input type="text" class="summer-input" id="productName"/>
		    </span>
		      <span class="field-btn-wrapper">
		        <a id="search" class="btn btn-primary btn-icon wave distance-right"><i class="icon icon-search"></i></a>
		        <a id="reset" class="btn btn-icon wave wave-dark"><i class="icon icon-refresh"></i></a>
		    </span>
	     </div>
	    
	     <div class="form-cont">
	       <div id="t-wrap">
		    <table class="summer-datagrid" id="dataList">
			    <thead>
				    <tr>
				        <th>名称</th>
				        <th>图片</th>
				        <th>类型</th>
				        <th>卷后价</th>
				        <th>操作</th>
				    </tr>
			    </thead>
		    </table>
		</div>
	     </div>
	     
	      <div class="form-cont">
	        <p class="form-cont-title">备注</p>
	        <textarea class="summer-textarea" id="note" name="note"></textarea>
	     </div>
	
	     
     
     <div class="form-btn-wrapper" id="funcbar">
        <a class="btn btn-normal" id="backBtn">关闭</a>
    </div>
  </div>
</form>
<script>
    
  var   editData,
        permission = CommonUtil.getPermission('${name_english}');
    
    $(function () {
    	 editData = ${editData};
    	 editData.productIds="";
    	 $('#form').form().form('loadDataEdit', {
             data: editData
         }); 
    	
        filePlugin("#url","#urlPicker","#urlList");
        filePlugin("#images","#imagesPicker","#imagesList");
    	//初始化funcbar
     	$('#funcbar').prepend($.funcbar({
            type: 'button',
            data: permission,
            permit: ['${name_english}:edit']
        }));
    	
     	$('#type').combobox({
     		async:false,
     	    defaultValue:editData.type,
            valueField : 'code',
            textField : 'name',
            url: COMMON_URL.getCode + '?type=T_MALL_BANNER_TYPE'
    	});
     	
     	$('#www').combobox({
     		async:false,
     	    defaultValue:editData.www,
            valueField : 'code',
            textField : 'name',
            url: COMMON_URL.getCode + '?type=T_MALL_BANNER_WWW'
    	});
     	
     	createTable();
    	
  	  //重置按钮
      $('#reset').on('click', function () {
      	//重置文本框的值
      	$('#productName').val('');
      	reloadTable();
      });
  	
      // 查询按钮
      $('#search').on('click', reloadTable);
    	
    	//保存按钮
    	$('#funcbar').on('click', 'a[data-permit="${name_english}:edit"]', submit);
    	
    	//返回按钮
    	$('#backBtn, #goBack').on('click',backMain);
    	
    	//删除
		$('#t-wrap').on('click', 'a[data-permit="${name_english}:setHuodong"]', function() {
			var $this = $(this),
			    id = $this.closest('tr').find('td[data-field="id"]').attr('data-value'),
			    type = $this.closest('tr').find('td[data-field="type"]').attr('data-value');
			
			var ids = $("#productIds").val();
			ids += ","+id+":"+type;
			if (ids.substr(0,1)==','){
				ids=ids.substr(1);
			}
			$("#productIds").val(ids);
			$this.html("已设置");
		});
    	
		//删除
		$('#t-wrap').on('click', 'a[data-permit="${name_english}:check"]', function() {
			var $this = $(this),
			    id = $this.closest('tr').find('td[data-field="id"]').attr('data-value'),
			    type = $this.closest('tr').find('td[data-field="type"]').attr('data-value');
			
			    if( '002'==type ){
			    	$.ajax({
			    		url:CONST_URL.CHECK+'?id='+id,
			    		type:'get',
			    		success:function(data){
			    			
			    			if("success"==data.result){
			    				$.stip({
			      	                type:'ok',//显示类型 有info、 ok、 danger
			      	                text: '商品有效'
			                  	});
			    			}else{
			    				$.stip({
			      	                type:'info',//显示类型 有info、 ok、 danger
			      	                text: '商品失效！'
			                  	});
			    			}
			    		}
			    	});
			    }else{
			    	$.stip({
      	                type:'ok',//显示类型 有info、 ok、 danger
      	                text: '商品有效'
                  	});
			    }
		});
    });
    
    
    
    //表单提交
    function submit() {
         $("#form").form({
        	 buttons : ['#saveBtn'],
             ajax: {
                 url: CONST_URL.EDIT
             },
             onSubmitSuccess: function (data) {
            	 $.stip({
   	                type:'ok',//显示类型 有info、 ok、 danger
   	                text: '保存成功！',
   	                onBeforeHide: function () {
   	                	backMain();
   	                }
            	 });
              }
         }).form("submit");
    }
    
 // 重新加载表格
	function reloadTable() {
		$('#dataList').datagrid('reload',{
            ajax: {
            	param: {
            		"name": trimSpace($('#productName').val())
            	}
            }
        });
	}
    
   //创建表格
    function createTable() {
    	$('#dataList').datagrid({
    		ajax: {
    			url: CONST_URL.LIST,
    			param: {
    				"name": trimSpace($('#productName').val())
            	}
    		},
    		columns: [
    		     {
    		    	 field: 'id',
    		    	 hidden: true
    		     },
    		     {
    		    	 field: 'name'
    		     },
    		     {
    		    	 field: 'mainImageUrl',
    		    	 render: function (rowData) {
    		    		 return '<img style="height:100px;width:100px;" src="'+ rowData.mainImageUrl +'"></img>';
    		    	 }
    		     },
    		     {
    		    	 field: 'type',
    		    	 hidden: true
    		     },
    		     {
    		    	 render: function (rowData) {
    		    		 if("001"==rowData.type){
    		    			 return "友惠";
    		    		 }
    		    		 if("002"==rowData.type){
    		    			 return "京东";
    		    		 }
    		    	 }
    		     },
    		     {
    		    	 field: 'productPrice'
    		     },
    		     {
    		    	 render: function (rowData) {
    		    		 
    		    		 return $.funcbar({
    		    			 data: permission,    //请求的数据
    		    			 type: 'text',     //类型
    		    			 display: 2,    //显示数量
    		    			 permit: [ '${name_english}:check','${name_english}:setHuodong'] //需要的权限按钮
    		    		 });
    		    	 }
    		     }
    		          
    	    ]
    	});
    }
    
    
    //返回主页面
    function backMain() {
    	window.location.href = CONST_URL.INIT_MAIN;
    }
    
    //请求url
    var CONST_URL = {
    	CHECK: basePath + '${common_url}check',
    	LIST: basePath + '${common_url}listproducts',
    	INIT_MAIN: basePath + "${common_url}init",
    	GET_PRODUCTS: basePath + "${common_url}products",
       	EDIT: basePath + "${common_url}edit"
    };
    
</script>
</body>
</html>